<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.js" type="text/javascript"></script>
    <script src="/webjars/vue/2.6.10/dist/vue.js" type="text/javascript"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
<div id="vuebox">
  <div class="container" style="margin-top: 50px">
      <h1 class="text-center">商品出库</h1>
      <form class="form-inline" role="form" style="padding-left: 250px;">
          <div style="padding-left: 20px;">
              <label>出库商品:</label>
              <select class="form-control" v-model="categoryid">
                  <option value="0">请选择起飞城市</option>
                  <option v-for="item in categoryList.data" :value="item.quantity">{{item.productname}}</option>
              </select>
          </div>
          <div style="padding-left: 20px;margin-top: 20px">
              <label for="categoryId" class="col-sm-2 control-label">数量</label>
              <div style="margin-left: -90px" class="col-sm-10">
                  <input @blur="mouseout" v-model="shuliang" id="categoryId" type="text" class="form-control"><span id="xianshi"></span>
              </div>
          </div>
          <div style="padding-left: 20px;margin-top: 20px">
              <label for="jingshouren" class="col-sm-2 control-label">经手人</label>
              <div style="margin-left: -90px" class="col-sm-10">
                  <input v-model="renas"  id="jingshouren" type="text" class="form-control">
              </div>
          </div>
      </form>
  </div>
    <div style="margin-left: 500px;margin-top: 20px">
        <button class="btn btn-default">重置</button>
        <button class="btn btn-primary" @click="saveBook">购买</button>
    </div>

</div>
</body>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
                categoryList:{},
                categoryid:"0",
                tianshuliang:"",
                shuliang:"",
                renas:"",
                addTake:"",
            },
            methods:{
                mouseout:function () {
                    axios.get("http://localhost:8081/seleById",{params:{id:this.categoryid}}).then(res=>{
                        this.tianshuliang=res.data.data.quantity;
                        if(this.tianshuliang<this.shuliang){
                        $("#xianshi").html("所选商品库存不足,库存量为:"+this.tianshuliang).css("color","red");
                        }else{
                            $("#xianshi").html("可出库").css("color","green");
                        }
                    })
                },
                saveBook:function () {
                if(this.categoryid==0){
                    alert("请选择出库商品!")
                    return;
                }
                if(this.shuliang.length==0){
                    alert("请填写出库数量!")
                    return;
                }
                if(this.shuliang<0){
                    alert("出库数量必须大于0的整数")
                    return;
                }
                if(this.renas.length==0){
                    alert("请填写经手人!")
                    return;
                }
                axios.get("http://localhost:8081/insertTake",{params:{count:this.tianshuliang,handler:this.renas}}).then(res=>{
                this.addTake=res.data;
                if(this.addTake.result=="SUCCESS"){
                    alert("出库成功!")
                }else{
                    alert("出库失败!")
                }
                })

                axios.get("http://localhost:8081/up",{params:{id:this.categoryid,count:this.shuliang}}).then(res=>{

                })
                },
            },
            mounted(){
                axios.get("http://localhost:8081/selePro").then(res=>{
                this.categoryList=res.data;
                })
            }
    })
</script>
</html>